<template>
    <div>
        <!-- 监听属性 -->
        <button @click="counter++">点我++</button>
        {{reverse_msg}}
        <ul>
            <li v-for="(i,index) in tlist" :class="{on:index%2==0,off:index%2!=0}">
                {{i.text}}
            </li>
        </ul>


        <div v-if="type == A">A</div>
        <div v-else-if="type == B">B</div>
        <div v-else>C</div>



        <h1 v-show = 'OK'>你看见我了</h1>
        {{msg}}
    </div>
</template>
<script>
export default {
    data() {
        return {
            msg:'Hello Python',
            OK:false,
            type:'B',
            tlist:[{text:'汽车'},{text:'手机'},{text:'电脑'},{text:'食品'}],
            isactive:false,
            counter:0
        }
    },
    //监听属性
    watch:{
        counter:function(nval,oval){
            console.log('计数器的变化:'+'从'+oval+'变成了'+nval);
            
        }
    },
    //计算属性
    computed:{
        reverse_msg:function(){
            return this.msg.split(' ').reverse().join()
        }
    },
    methods: {
        
    },
    mounted() {
        
    },
}
</script>
<style lang="">
.on{background:black}
.off{background: white}
    
</style>